<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
	
	<h:head> 
</h:head>

<f:metadata>
   <f:viewParam name="tpid" value="#{packageViewBean.TPId}" />
   <f:viewAction action="#{packageViewBean.init}" />
</f:metadata>

<h:body>
	<h:outputScript id="jsScript">
        var disabledDays = [#{packageViewBean.disabledDates}];
        
		function disableAllTheseDays(date) {
		    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
		    for (i = 0; i &lt; disabledDays.length; i++) {
		        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
		            return [false];
		        }
		    }
		    return [true];
		}
	</h:outputScript>
		<h:form id="form">
		
		<p:contextMenu for="rooms" widgetVar="cMenu">     
        	<p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('roomsTable').showCellEditor();return false;"/>    
        	<p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>    
    	</p:contextMenu>
		
        <p:panelGrid columns="2" cellpadding="5" id="leavingPanel">
	        <f:facet name="header">  
	        	Define your travel
	    	</f:facet>
	    	
	    	<h:outputLabel value="Where do you want to leave: " for="departureSelect"/>
	    	<p:selectOneMenu id="departureSelect" value="#{packageViewBean.selectedMean}" converter="meanConverter">
	   			<f:selectItem itemLabel="#{packageViewBean.selectedMean.departure.name}" 
	   				itemValue="#{packageViewBean.selectedMean}" />
	   			<f:selectItems value="#{packageViewBean.availableMeans}" var="m" itemLabel="#{m.departure.name}" itemValue="#{m}"/> 
	   		</p:selectOneMenu>
	   		
	   		<h:outputLabel value="You are: " for="travellersN"/>
			<p:column>
			<p:inputText size="10" id="travellersN" value="#{packageViewBean.travellers}"/> people
			</p:column>
			
			<h:outputLabel value="Travelling for: " for="travellersN"/>
			<p:column>
			<p:inputText size="10" id="duration" value="#{packageViewBean.duration}"/> days
			</p:column>
			
			<h:outputLabel value="Leaving date: search since " for="cal" />
			<p:calendar size="8" id="cal" navigator="true" display="inline" value="#{packageViewBean.searchSince}"
				 mindate="#{packageViewBean.today}" />
			
			<h:outputLabel value="You can eventually postpone your leaving for: " for="searchPeriod"/> 
			<p:column>
			<p:inputText size="10" id="searchPeriod" value="#{packageViewBean.searchDuring}"/> days	
			</p:column>
			
			<f:facet name="footer">  
	            		<p:commandButton id="checkButton" value="Check availability" icon="ui-icon-check"
	            			action="#{packageViewBean.checkAvailability()}" ajax="false"/>
	            		<p:button href="PackageList.xhtml" value="Cancel" />  
	        </f:facet>
        </p:panelGrid>
        
        <h:panelGroup id="showPanel">
			<p:panel id="datePanel" rendered="#{packageViewBean.isAvailable}">
				<p:outputLabel for="leavingCal" value="Choose your leaving date: "/>
				<p:calendar size="8" id="leavingCal" navigator="true" display="inline" value="#{packageViewBean.leavingDate}" 
					 beforeShowDay="disableAllTheseDays" mindate="#{packageViewBean.today}"/>
			</p:panel>
			<p:dataTable id="rooms" var="r" rendered="#{packageViewBean.isAvailable}" value="#{packageViewBean.selectedRooms}"
				editable="true" editMode="cell" widgetVar="roomsTable">
				 
				<p:column headerText="Room type">
					<p:outputLabel value="#{r.type.toString()}"/>
				</p:column>
				
				<p:column headerText="Total rooms">
					<p:outputLabel value="#{r.totalRooms}"/>
				</p:column>
				
				<p:column headerText="Price per room">
					<p:outputLabel value="#{r.price}"/>
				</p:column>
				
				<p:column headerText="Your needs">
					<p:cellEditor>  
                   		<f:facet name="output"><h:outputText value="#{r.selectedRooms}" /></f:facet>  
                   		<f:facet name="input"><p:inputText id="valueInput" value="#{r.selectedRooms}" style="width:96%"/></f:facet>  
               		</p:cellEditor>
				</p:column>
				
				<p:column><p:message for="valueInput" /></p:column>				
				
				<f:facet name="footer">  
					<p:commandButton icon="ui-icon-wrench" value="Customize travel package" action="#{packageViewBean.customize()}" />
					<p:commandButton update=":form:showPanel" id="proceedButton" icon="ui-icon-play" value="Proceed with booking" action="#{packageViewBean.proceed()}" />
				</f:facet>
			</p:dataTable>
		
		<p:panel rendered="#{not empty packageViewBean.error}">
	    	<h:outputLabel value="#{packageViewBean.error}" style="color:red" />
	    </p:panel>
	    </h:panelGroup>
        </h:form> 
</h:body>
</html>